Prizm Content Connect
Customizing the Styles
| Working with the Viewer > Customizing the Viewer > Customizing the Styles |
The Viewer uses traditional CSS to control presentation. The stylesheets should be loaded in the following order:
It is recommended to create your own CSS file and add it to the bottom of the cascade.
This file contains the styles for the Viewer container and UI. All selectors in viewer.css have a parent of .pccv, in order to override the .pccv parent should be in the selector:
| Example |
Copy Code
|
|---|---|
/* Set the navigation tab bar to dark red */
.pccv .pcc-nav-tabset,
.pccv .pcc-nav-tabset .pcc-tab-item,
.pccv .pcc-status-bar {background:#5b100d}
|
|
A number of icons are used throughout the Viewer for different UI elements. These icons are stored in the icons*.png files. The icons sprite image has a white themed version for dark backgrounds. There is larger @2x version, to account for HD/Retina displays, and a smaller ½ sized version for legacy support. Since modern browsers support the background-size property we use the @2x images for all icons and degrade to the ½ sized icons for Internet Explorer 8.
The viewer utilizes CSS3 Media Queries with expressions using min-width and max-width to adjust the layout of navigation and dialogs. The Media Query Breakpoints are set according to the Viewer layout. On smaller viewports the tab navigation collapses into a menu and some tools are hidden. On larger viewports the dialogs transform from horizontal to a vertical layout to utilize screen real estate. The breakpoints are as follows:
| Example |
Copy Code
|
|---|---|
/* Target modern browsers that support media queries */ @media (min-width: 0) {} /* Mobile & Tablet Sizes, collapse navigation tabs into menu */ @media (max-width: 767px) {} /* Desktop Sizes */ @media (min-width: 768px) {} |
|
The viewer uses a basic grid system to assist with the UI layout. Through a series of rows and columns the layout can scale dynamically. Rows are used to create horizontal groups of columns. Columns are created by defining the number of twelve columns you will span. For example, three columns would use three divs with a class of .pcc-col-4:
| Example |
Copy Code
|
|---|---|
<div class=”pcc-row”> <div class="pcc-col-4">Left</div> <div class="pcc-col-4">Center</div> <div class="pcc-col-4">Right</div> </div> |
|
This file contains all fallback styles relating to Internet Explorer 8. Here we address unsupported or troublesome CSS features like drop shadows, opacity or background alpha transparency. In addition, because Media Queries are not supported in Internet Explorer 8 and no Media Query polyfills are used in this regard, we add styles here that are placed within a Media Query block in viewer.css.
This file contains the styles for the ViewerControl, which displays the document. Any changes made to this file could affect viewer performance.
There are a few polyfills used to provide support for modern browser features: